<template>
	<view class="row-between" style="position: relative;width: 100%;">
		<view class="col-between left" >
			<image src="/static/images/detail-back.png" class="back"></image> 
			<view class="col" style="margin-bottom: 100rpx;">
				<view class="logo"></view>
				<view class="type " :class="clickType==2?'row-between-center':'row-h-center'" style="margin-top: 40rpx;" @click="changeType(0)">
					<image src="/static/images/hot.svg" class="type-img"></image>
					<view class="type-text">人气榜</view>
				</view>
				<view class="type " :class="clickType==3?'row-between-center':'row-h-center'"  @click="changeType(1)">
					<image src="/static/images/reward.svg" class="type-img"></image>
					<view class="type-text">打赏榜</view>
				</view>
				<view class="type " :class="clickType==5?'row-between-center':'row-h-center'"  @click="changeType(2)">
					<image src="/static/images/newest.svg" class="type-img"></image>
					<view class="type-text">新作榜</view>
				</view>
				<view class="time singe-line">数据截止时间2023-10-20</view>
			</view>	
		</view>
		<view class="right col">
		<scroll-view :scroll-y="true">
			<view style="margin-top: 60rpx;">
				
				<view class="item col" v-for="item,index in list" :key="index" >
					<view class="row-end reward">
					{{typeItemText}}	 {{item.scoreRate}}
					</view>
					<view class="row-center">
						<view class="book" :style="{ backgroundImage: `url(${item.coverPicList[0]})` }">
							
						</view>
					</view>
				
					<view class="title singe-line">
						{{item.title}}
					</view>
					<view class="desc  singe-line">
						{{item.desc}}
					</view>
					<view  class="rank-img col-center">
						<view class="rank-text">{{typeItemText2}}</view>
						<view class="rank-text" style="margin-top: 10rpx;">1</view>
					</view>
				</view>
			</view>
		</scroll-view>
	</view>
	</view>
</template>

<script>
	import {
		searchTop
	} from '@/api/change/index.js'
	
	export default {
		data() {
			return {
				clickType:2,
				list:[],
				typeItemText:'',
				typeItemText2:''
			}
		},
		onLoad(option) {
			this.clickType = option.type
			this.changeTypeText()
			this.searchData()
		},
		methods: {
			changeType(type){
				this.clickType = type
				this.changeTypeText()
			},
				// 1飙升榜，2：人气榜，3：打赏榜，4：畅销版，5：新书版
			changeTypeText(){
				if(this.clickType==2){
					this.typeItemText = '上周总人气'
					this.typeItemText2 = 'HOT'
				}
				else if(this.clickType==3){
					this.typeItemText = '上周打赏'
					this.typeItemText2 = 'HOT'
				}
				else if(this.clickType==5){
					this.typeItemText = '人气'
					this.typeItemText2 = 'NEW'
				}
			},
			
			searchData(){
				searchTop({pageType:this.clickType}).then(res=>{
					this.list = res.data
				})
			}
			
		}
	}
</script>
<style>
	page{
		background-image: url('/static/images/rank_bg.png');
		background-size: 100% 100%;
		background-repeat: no-repeat;
	}
</style>
<style lang="scss" scoped>
	
	.item{
		margin-top: 40rpx;
		position: relative;
		background-color: white;
		width: 360rpx;
		border-radius: 10rpx;
		background-color: rgba(255, 255, 255, 1);
		color: rgba(16, 16, 16, 1);
		padding: 15rpx 30rpx;
		.reward{
			color: rgba(51, 51, 51, 1);
			font-size: 24rpx;
			
		}
		.rank-img{
			left: 0;
			margin-top: -30rpx;
			width: 120rpx;
			height: 120rpx;
			position: absolute;
			background-image: url('/static/images/sheild.svg');
			background-size: 100% 100%;
			background-repeat: no-repeat;
		}
		.rank-text{
			color: rgba(248, 248, 248, 1);
			font-size: 24rpx;
			text-align: center;
			font-weight: bold;
		}
		.book{
			background-size: 100% 100%;
			background-repeat: no-repeat;
			margin-top: 5rpx;
			width: 300rpx;
			height: 360rpx;
			border-radius: 10rpx;
			border: 4rpx solid rgba(51, 51, 51, 1);
		}
		.title{
			margin-top: 5rpx;
			color: rgba(16, 16, 16, 1);
			font-size: 40rpx;
		}
		.desc{
			margin-top: 5rpx;
			color: rgba(108, 108, 108, 1);
			font-size: 24rpx;
		}
	}
	
	.left{
		height: 100vh;
		margin-left: 30rpx;
		width: 50%;
		margin-right: 25rpx;
	}
	.right{
		margin-right: 20rpx;
		height: 100vh;
		margin-left: 25rpx;
	}
	.logo{
		width: 120rpx;
		height: 120rpx;
		background-color: red;
	}
	.back{
		margin-top: 80rpx;
		width: 60rpx;
		height: 60rpx;
	}
	.type{
			margin-top: 40rpx;
		.type-img{
			width: 60rpx;
			height: 60rpx;
		}
		.type-text{
			margin-left: 20rpx;
			font-weight: bold;
			color: rgba(248, 248, 248, 1);
			font-size: 56rpx;
		}
	}
	.time{
		margin-top: 40rpx;
		color: rgba(248, 248, 248, 1);
		font-size: 28rpx;
	}
</style>
